<template>
  <div class="data-table">
    <div v-if="title" class="title">{{ title }}</div>
    <el-table
      :data="dataSource"
      border
      class="table-box"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      size="small"
    >
      <el-table-column
        v-for="col in columns"
        :key="col.prop"
        :label="col.label"
        :prop="col.prop"
        align="center"
      />
    </el-table>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  columns: { label: string, prop: string }[],
  dataSource: Record<string, any>[],
  title?: string
}>()

const headerCellStyle = {
  background: '#1a2b47',
  color: '#00eaff',
  fontWeight: 'bold',
  fontSize: '14px',
  border: 'none'
}
const cellStyle = {
  background: '#14233c',
  color: '#fff',
  fontSize: '13px',
  border: 'none'
}
</script>

<style scoped>
.data-table {
  background: #14233c;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #00eaff;
}
.table-box {
  background: #14233c;
  border-radius: 6px;
}
:deep(.el-table__header th) {
  background: #1a2b47 !important;
  color: #00eaff !important;
  border: none !important;
}
:deep(.el-table__body td) {
  background: #14233c !important;
  color: #fff !important;
  border: none !important;
}
</style>
